<template>
  <div id="main" style="700px;height:800px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "VisitVisitorindex",

  data() {
    return {};
  },

  methods: {
    
    getlist() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      setTimeout(function () {
        option = {
          legend: {},
          tooltip: {
            trigger: "axis",
            showContent: false,
          },
          dataset: {
            source: [
              ["product", "2012", "2018", "2019", "2020", "2021", "2022"],
              ["外来到访人员", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
              ["本校教师", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
              ["本校学生", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
              ["外来参观学校", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
            ],
          },
          xAxis: { type: "category" },
          yAxis: { gridIndex: 0 },
          grid: { top: "55%" },
          series: [
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "pie",
              id: "pie",
              radius: "30%",
              center: ["50%", "25%"],
              emphasis: {
                focus: "self",
              },
              label: {
                formatter: "{b}: {@2012} ({d}%)",
              },
              encode: {
                itemName: "product",
                value: "2012",
                tooltip: "2012",
              },
            },
          ],
        };
        myChart.on("updateAxisPointer", function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: "pie",
                label: {
                  formatter: "{b}: {@[" + dimension + "]} ({d}%)",
                },
                encode: {
                  value: dimension,
                  tooltip: dimension,
                },
              },
            });
          }
        });
        myChart.setOption(option);
      });

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style lang="scss" scoped>
</style>